<template>
  <div>
    <div>我是C，我负责接收对象</div>
    <div>{{ messageA }}</div>
    <div>{{ messageB }}</div>
    <div>{{ GlobalObject.name }}</div>
    <div>{{ fullMessage }}</div>
    <div>{{ MyGlobalObject.name }}</div>
    <div>{{ user.name }}</div>
    <div>{{ context }}</div>
    <div>{{ injected }}</div>
  </div>
</template>

<script>
import { myInjectionKey } from "../../../../components/keys";
export default {
  /**
   * 可以使用数组和对象两种方式接收
   */
  // inject: ["messageA", "messageB", "GlobalObject"],
  inject: {
    messageA: {},
    messageB: {},
    GlobalObject: {},
    MyGlobalObject: {
      from: "GlobalObject",
      default: "什么都没有",
    },
    user: {
      // 对于非基础类型数据，如果创建开销比较大，或是需要确保每个组件实例需要独立数据的，请使用工厂函数
      default: () => ({ name: "John" }),
    },
    context: {},
    injected: { from: myInjectionKey },
  },
  /**
   * 注入会在组件自身的状态之前被解析，因此你可以在 data() 中访问到注入的属性
   */
  data() {
    return {
      fullMessage: `${this.messageA} | ${this.messageB}`,
    };
  },
};
</script>

<style></style>
